<template>

    <el-container style=" border: 1px solid #eee">
        <el-aside width="400px" style="padding: 10px; border-right: 1px solid #eee;">
            <menu-tree style="text-align: center" v-model="menuDataModel" :showHandle="showHandle" @node-click="nodeClick" @append="append" @remove="remove" @edit="edit">
                <el-button slot="handle" type="primary"  @click="add">添加</el-button>
            </menu-tree>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <!--<el-dropdown>-->
                    <!--<i class="el-icon-setting" style="margin-right: 15px"></i>-->
                    <!--<el-dropdown-menu slot="dropdown">-->
                        <!--<el-dropdown-item>查看</el-dropdown-item>-->
                        <!--<el-dropdown-item>新增</el-dropdown-item>-->
                        <!--<el-dropdown-item>删除</el-dropdown-item>-->
                    <!--</el-dropdown-menu>-->
                <!--</el-dropdown>-->
                <!--<span>王小虎</span>-->
            </el-header>

            <el-main>
                <menu-form v-model="menuFormModel" :option="menuOptionModel" @submit="handleSubmit"></menu-form>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

    import MenuTree from "@/page/admin/menu/menu-tree";
    import MenuForm from "@/page/admin/menu/menu-form";

    export default {
        name: "menu-tree-form",
        components: {MenuForm, MenuTree},

        model: {
            prop: 'menuData',//指向props的参数名
            event: 'returnBack'//事件名称
        },
        props: {
            menuData: {
                type: Object
            },
            menuForm: {
                type: Object
            },
            menuOption: {
                type: Object
            }
        },
        data() {
            return {
                showHandle:true,
                menuDataModel: this.menuData.list,
                menuFormModel: this.menuData.form,
                menuOptionModel: this.menuData.option
            }
        },
        watch: {

            'menuData.list'(n, o) {
                this.menuDataModel = n;
            },
            'menuData.form.parentId'(n, o) {
                this.menuFormModel = this.menuData.form;
            },
            'menuData.form.id'(n, o) {
                this.menuFormModel = this.menuData.form;
            }

        },
        methods: {
            nodeClick(data) {
                this.$emit("node-click", data)
            },
            add() {
                this.$emit("add");
            },
            append(data) {
                this.$emit("append", data);
            },
            remove(node, data) {
                this.$emit("remove", node, data);
            },
            edit(data) {
                this.$emit("edit", data);
            },
            handleSubmit(form, done) {

                this.$emit("submit", form, done);
            }
        }
    }
</script>


<style scoped>

</style>
